<template>
	<div id="check" class="check-container">
		<div class="check-box">
			<div class="check-head">
				<div class="text-center company-name"><span>成都倍特药业股份有限公司</span></div>
				<div class="text-center check-name"><span>请 验 单</span></div>
				<div class="check-num"><span>记录编号：ZL·T / SOP·031-R02-01</span></div>
			</div>
			<div class="check-body">
				<table border="1">
					<tr>
						<td class="h-40 text-center">生产车间</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? wkList.workshopName : zcList.workshopName }}</div>
						</td>
						<td class="h-40 text-center">生产工序</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? '-' : zcList.procedureName }}</div>
						</td>
						<td rowspan="7" class="t-r">
							<div>
								第一联<br><br>请验部门留存
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">品&nbsp;&nbsp;名</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.productName }}</div>
						</td>
						<td class="h-40 text-center">规&nbsp;&nbsp;格</td>
						<td colspan="2">
							<div class="m-l-5">
								<span v-html="checkList.productSpec"></span>
								<span
									v-if="checkList.productPackSpec != null">{{ ' × ' + checkList.productPackSpec }}</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">产品编码</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.productGmp }}</div>
						</td>
						<td class="h-40 text-center">批&nbsp;&nbsp;号</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.batchNum }}</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">生产日期</td>
						<td colspan="2">
							<div v-if="zc" class="m-l-5">{{ zcList.productionDate | changeTime }}</div>
							<div v-if="wk && wkList.productionDate != null" class="m-l-5">
								{{ wkList.productionDate | changeTime }}</div>
						</td>
						<td class="h-40 text-center">批&nbsp;&nbsp;量</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? '-' : (zcList.batchQuantity + ' ' + zcList.batchUnitName) }}
							</div>
						</td>
					</tr>
					<tr>
						<td class="t-1 text-center h-40">取 样 量</td>
						<td class="t-1 h-40">
							<div class="m-l-5">{{ checkList.getQuantity + ' ' + checkList.getUnitName }}</div>
						</td>
						<td class="t-1 text-center h-40">请验日期</td>
						<td class="t-1 h-40">
							<div class="m-l-5">{{ checkList.registCheckDate | changeTime }}</div>
						</td>
						<td class="t-1 text-center h-40">请 验 人</td>
						<td class="t-1 h-40">
							<div class="m-l-5"></div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">请验项目</td>
						<td colspan="5">							<div class='herder_left' @click="change">
								<span v-if="checkList.isTest == 1">只用于留样</span>
								<span v-else-if="checkList.isTest == 2">只用于稳考</span>
								<span v-else-if="checkList.isAllTest == 0">全检</span>
								<template v-else>
									<span class="point" @click="itemNames.splice(index,1)" v-for="(item,index) of itemNames">{{index == (itemNames.length-1) ? (item) : (item + '、')}}</span>
								</template>
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">备&nbsp;&nbsp;注</td>
						<td colspan="5">
							<div @click="showEnvT = !showEnvT" class="m-l-5 point">
								{{ wk ? (wkList.stabilityModeName + wkList.timeValue + wkList.timeName) : checkList.remark }}
								<span v-if="wk && showEnvT">{{ '(' + checkList.remark + ')' }}</span>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="check-box" :style="{'margin-top': blankHeight, 'margin-bottom': '20px'}">
      <!-- <div class="check-box" style="padding-top: 100px;"> -->
      <!-- <div class="check-box" :style="{'margin-top': blankHeight, 'margin-bottom': '20px'}"> -->
			<div class="check-head">
				<div class="text-center company-name"><span>成都倍特药业股份有限公司</span></div>
				<div class="text-center check-name"><span>请 验 单</span></div>
				<div class="check-num"><span>记录编号：ZL·T / SOP·031-R02-01</span></div>
			</div>
			<div class="check-body">
				<table border="1">
					<tr>
						<td class="h-40 text-center">生产车间</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? wkList.workshopName : zcList.workshopName }}</div>
						</td>
						<td class="h-40 text-center">生产工序</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? '-' : zcList.procedureName }}</div>
						</td>
						<td rowspan="7" class="t-r">
							<div>
								第二联<br><br>质量控制部留存
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">品&nbsp;&nbsp;名</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.productName }}</div>
						</td>
						<td class="h-40 text-center">规&nbsp;&nbsp;格</td>
						<td colspan="2">
							<div class="m-l-5">
								<span v-html="checkList.productSpec"></span>
								<span
									v-if="checkList.productPackSpec != null">{{ ' × ' + checkList.productPackSpec }}</span>
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">产品编码</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.productGmp }}</div>
						</td>
						<td class="h-40 text-center">批&nbsp;&nbsp;号</td>
						<td colspan="2">
							<div class="m-l-5">{{ checkList.batchNum }}</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">生产日期</td>
						<td colspan="2">
							<div v-if="zc" class="m-l-5">{{ zcList.productionDate | changeTime }}</div>
							<div v-if="wk && wkList.productionDate != null" class="m-l-5">
								{{ wkList.productionDate | changeTime }}</div>
						</td>
						<td class="h-40 text-center">批&nbsp;&nbsp;量</td>
						<td colspan="2">
							<div class="m-l-5">{{ wk ? '-' : (zcList.batchQuantity + ' ' + zcList.batchUnitName) }}
							</div>
						</td>
					</tr>
					<tr>
						<td class="t-1 text-center h-40">取 样 量</td>
						<td class="t-1 h-40">
							<div class="m-l-5">{{ checkList.getQuantity + ' ' + checkList.getUnitName }}</div>
						</td>
						<td class="t-1 text-center h-40">请验日期</td>
						<td class="t-1 h-40">
							<div class="m-l-5">{{ checkList.registCheckDate | changeTime }}</div>
						</td>
						<td class="t-1 text-center h-40">请 验 人</td>
						<td class="t-1 h-40">
							<div class="m-l-5"></div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">请验项目</td>
						<td colspan="5">							<div class='herder_left' @click="change">
								<span v-if="checkList.isTest == 1">只用于留样</span>
								<span v-else-if="checkList.isTest == 2">只用于稳考</span>
								<span v-else-if="checkList.isAllTest == 0">全检</span>
								<template v-else>
									<span class="point" @click="itemNames.splice(index,1)" v-for="(item,index) of itemNames">{{index == (itemNames.length-1) ? (item) : (item + '、')}}</span>
								</template>
							</div>
						</td>
					</tr>
					<tr>
						<td class="h-40 text-center">备&nbsp;&nbsp;注</td>
						<td colspan="5">
							<div @click="showEnvT = !showEnvT" class="m-l-5 point">
								{{ wk ? (wkList.stabilityModeName + wkList.timeValue + wkList.timeName) : checkList.remark }}
								<span v-if="wk && showEnvT">{{ '(' + checkList.remark + ')' }}</span>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCheckInfo
	} from '@/api/check'
	import {
		CODE_OK
	} from '@/common/js/config'
	import {
		isBlank,
		parseTime,
		unique
	} from '@/common/js/utils'
	export default {
		data() {
			return {
				maxHeight: 1480,
				visible: false,
				checkList: {},
				zcList: {},
				wkList: {},
				itemNames: [],
				blankHeight: '0px',
				content: '',
				showEnvT: false,
				show: false
			}
		},
		mounted() {
		  this.LopTime();
		},
		props: ["childDataForm"],
		created() {
			if (!isBlank(this.childDataForm)) {
				this.checkList = this.childDataForm
				this.content = this.checkList.checkTypeId == 6 ? 'wk' : 'zc'
				this.visible = true
				this.getData()
			}
		},
		computed: {
			zc() {
				return this.checkList.checkTypeId == 4 || this.checkList.checkTypeId == 5
			},
			wk() {
				return this.checkList.checkTypeId == 6
			}
		},
		methods: {
			ygwzFilter(names) {
				//只存在有关物质1和2或有关物质的情况下，只显示有关物质12，其余全部显示有关物质
				if (names.indexOf('有关物质1') > -1 && names.indexOf('有关物质2') > -1 && names.indexOf('有关物质3') == -1) {
					// 如果有有关物质，那么不显示有关物质，只显示有关物质12
					names = names.filter(n => n != '有关物质')
				} else {
					// 全部显示有关物质
					names = names.map(n => {
						if (n.indexOf('有关物质') > -1) {
							return '有关物质'
						} else {
							return n
						}
					})
				}
				return names
			},
			getData() {
				const params = {
					content: this.content,
					checkId: this.checkList.checkId
				}
				getCheckInfo(params).then(res => {
					if (res.code === CODE_OK) {
						this.zcList = res.info.zcList
						this.wkList = res.info.wkList
						if (this.checkList.isAllTest == 1 && this.checkList.isTest == 0) {
							//过滤有关物质,含量,溶出度
							let items = res.info.items
							this.itemNames = items.map(item => {
								let c = item.inspectionCategoryName
								let n = item.inspectionItemName
								if (c.indexOf('化学性能') > -1) {
									n = '化学性能'
								} else {
									if (!isBlank(n)) {
										if (n.indexOf('有关物质3') > -1 ||
											n.indexOf('有关物质 3') > -1 ||
											n.indexOf('有关物质III') > -1 ||
											n.indexOf('有关物质 III') > -1 ||
											n.indexOf('有关物质Ⅲ') > -1 ||
											n.indexOf('有关物质 Ⅲ') > -1) {
											n = '有关物质3'
										} else if (n.indexOf('有关物质2') > -1 ||
											n.indexOf('有关物质 2') > -1 ||
											n.indexOf('有关物质II') > -1 ||
											n.indexOf('有关物质 II') > -1 ||
											n.indexOf('有关物质Ⅱ') > -1 ||
											n.indexOf('有关物质 Ⅱ') > -1) {
											n = '有关物质2'
										} else if (n.indexOf('有关物质1') > -1 ||
											n.indexOf('有关物质 1') > -1 ||
											n.indexOf('有关物质I') > -1 ||
											n.indexOf('有关物质 I') > -1 ||
											n.indexOf('有关物质Ⅰ') > -1 ||
											n.indexOf('有关物质 Ⅰ') > -1) {
											n = '有关物质1'
										} else if (n.indexOf('有关物质') > -1) {
											n = '有关物质'
										} else if (n.indexOf('含量均匀度') > -1) {
											n = '含量均匀度'
										} else if (n.indexOf('含量') > -1) {
											n = '含量'
										} else if (n.indexOf('溶出度') > -1) {
											n = '溶出度'
										} else if (n.indexOf('释放度') > -1) {
											n = '释放度'
										} else if (n.indexOf('外观') > -1) {
											n = '外观'
										} else if (n.indexOf('分子量与分子量分布') > -1) {
											n = '分子量与分子量分布'
										}
									}
								}
								return n
							})
							this.itemNames = unique(this.itemNames)
							this.itemNames = this.ygwzFilter(this.itemNames)
							this.itemNames = unique(this.itemNames)
							// this.itemNames = this.itemNames.join('、')
						}
						this.$nextTick(() => {
							this.fallToMaxHeight()
						})
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			fallToMaxHeight() {
				let currentHeight = parseInt(window.getComputedStyle(document.getElementById('check')).getPropertyValue(
					'height'))
				if (currentHeight < this.maxHeight) {
					this.blankHeight = this.maxHeight - currentHeight
					this.blankHeight = this.blankHeight + 'px'
				}
			},
			change(){
			   this.show = !this.show
			  },
			close() {
				this.visible = false
				this.$emit('close')
			}
		}
	}
</script>

<style type="text/scss" lang="scss" scoped>
	.check-container{
    color: black;
    background-color: #fff;
    font-family: SimSun;
    font-size: 23px;
    width: 960px;
    // height: 1480px;
    padding: 15px;
    .check-box{
      // padding: 0 50px;
    }
    .check-head{
      height: 120px;
      .company-name{
        margin-top: 20px;
      }
      .check-name{
        font-size: 30px;
        margin-top: 15px;
      }
      .check-num{
        font-size: 20px;
        text-align: right;
        margin-top: 5px;
      }
    }
    .check-body{
      .h-40{
        height: 45px;
      }
      .m-l-5{
        margin-left: 5px;
      }
      .t-1{
        width: 130px;
      }
      .t-r{
        width: 50px;
        font-size: 14px;
        padding: 0 17px;
      }
    }
  }
</style>
